<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Select - Single Value</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Select Item: Single Value</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content">
        <ion-item>
          <ion-label position="stacked">Gender</ion-label>
          <ion-select id="gender">
            <ion-select-option value="f">Female</ion-select-option>
            <ion-select-option value="m">Male</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Popover</ion-label>
          <ion-select interface="popover">
            <ion-select-option value="select">Select</ion-select-option>
            <ion-select-option value="action">Action Sheet</ion-select-option>
            <ion-select-option value="popover">Popover</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Gaming</ion-label>
          <ion-select id="gaming">
            <ion-select-option value="nes">NES</ion-select-option>
            <ion-select-option value="n64">Nintendo64</ion-select-option>
            <ion-select-option value="ps">PlayStation</ion-select-option>
            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
            <ion-select-option value="snes">SNES</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Operating System</ion-label>
          <ion-select id="os">
            <ion-select-option value="dos">DOS</ion-select-option>
            <ion-select-option value="lunix">Linux</ion-select-option>
            <ion-select-option value="mac7">Mac OS 7</ion-select-option>
            <ion-select-option value="mac8">Mac OS 8</ion-select-option>
            <ion-select-option value="win3.1">Windows 3.1</ion-select-option>
            <ion-select-option value="win95">Windows 95</ion-select-option>
            <ion-select-option value="win98">Windows 98</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Notifications</ion-label>
          <ion-select id="notifications">
            <ion-select-option value="enable">Enable</ion-select-option>
            <ion-select-option value="mute">Mute</ion-select-option>
            <ion-select-option value="mute_week">Mute for a week</ion-select-option>
            <ion-select-option value="mute_year" (ionSelect)="notificationSelect($event)"
              >Mute for a year</ion-select-option
            >
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Edit</ion-label>
          <ion-select>
            <ion-select-option value="add_reaction">Add Reaction</ion-select-option>
            <ion-select-option value="copy_text">Copy Text</ion-select-option>
            <ion-select-option value="share_text">Share Text</ion-select-option>
            <ion-select-option value="copy_link">Copy Link to Message</ion-select-option>
            <ion-select-option value="remind_me">Remind Me</ion-select-option>
            <ion-select-option value="pin_file">Pin File</ion-select-option>
            <ion-select-option value="star_file">Star File</ion-select-option>
            <ion-select-option value="mark_unread">Mark Unread</ion-select-option>
            <ion-select-option value="edit_title">Edit Title</ion-select-option>
            <ion-select-option value="save_image">Save Image</ion-select-option>
            <ion-select-option value="copy_image">Copy Image</ion-select-option>
            <ion-select-option value="delete_file">Delete File</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Music</ion-label>
          <ion-select id="music" placeholder="Select Music">
            <ion-select-option>Alice in Chains</ion-select-option>
            <ion-select-option>Green Day</ion-select-option>
            <ion-select-option>Nirvana</ion-select-option>
            <ion-select-option>Pearl Jam</ion-select-option>
            <ion-select-option>Smashing Pumpkins</ion-select-option>
            <ion-select-option>Soundgarden</ion-select-option>
            <ion-select-option (ionSelect)="musicSelect($event)">Stone Temple Pilots</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Date</ion-label>
          <ion-select id="month">
            <ion-select-option value="01">January</ion-select-option>
            <ion-select-option value="02">February</ion-select-option>
            <ion-select-option value="03">March</ion-select-option>
            <ion-select-option value="04">April</ion-select-option>
            <ion-select-option value="05">May</ion-select-option>
            <ion-select-option value="06">June</ion-select-option>
            <ion-select-option value="07">July</ion-select-option>
            <ion-select-option value="08">August</ion-select-option>
            <ion-select-option value="09">September</ion-select-option>
            <ion-select-option value="10">October</ion-select-option>
            <ion-select-option value="11">November</ion-select-option>
            <ion-select-option value="12">December</ion-select-option>
          </ion-select>
          <ion-select id="year"> </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Statuses</ion-label>
          <ion-select id="status" value="selected">
            <ion-select-option value="selected">Selected</ion-select-option>
            <ion-select-option value="default">Default</ion-select-option>
            <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Currency</ion-label>
          <ion-select id="currency"> </ion-select>
        </ion-item>

        <ion-button onclick="resetGender()">Reset Gender</ion-button>

        <p aria-hidden="true" class="ion-padding">
          <code>gender: <span id="genderResult"></span></code>
          <br />
          <code>gaming: <span id="gamingResult"></span></code>
          <br />
          <code>os: <span id="osResult"></span></code>
          <br />
          <code>notifications: <span id="notificationsResult"></span></code>
          <br />
          <code>music: <span id="musicResult"></span></code>
          <br />
          <code>date: <span id="monthResult"></span>/<span id="yearResult"></span></code>
          <br />
          <code>status: <span id="statusResult"></span></code>
          <br />
          <code>currency: <span id="currencyResult"></span></code>
          <br />
        </p>
      </ion-content>

      <style>
        .outer-content {
          --background: #f2f2f2;
        }
      </style>

      <script>
        customElements.whenDefined('ion-select-option').then(async () => {
          let selects = document.querySelectorAll('ion-select');
          selects.forEach(function (select) {
            select.addEventListener('ionChange', function () {
              setResults(select);
            });
          });

          async function setResults(select) {
            if (select.id) {
              var resultsEl = document.getElementById(select.id + 'Result');
              if (resultsEl) {
                var value = typeof select.value === 'object' ? JSON.stringify(select.value) : select.value;
                resultsEl.innerHTML = value;
              }
            }
          }

          var os = document.getElementById('os');
          os.value = 'win3.1';
          setResults(os);

          var month = document.getElementById('month');
          month.value = '12';
          setResults(month);

          var year = document.getElementById('year');

          var years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999];

          for (var i = 0; i < years.length; i++) {
            var option = document.createElement('ion-select-option');
            option.value = option.innerHTML = years[i];

            year.appendChild(option);
          }

          if (year.componentOnReady) {
            await year.componentOnReady();
          }

          year.value = 1994;

          setResults(year);

          var currencies = [
            {
              symbol: '$',
              code: 'USD',
              name: 'US Dollar',
            },
            {
              symbol: '€',
              code: 'EUR',
              name: 'Euro',
            },
            {
              symbol: '£',
              code: 'FKP',
              name: 'Falkland Islands Pound',
            },
            {
              symbol: '¢',
              code: 'GHS',
              name: 'Ghana Cedi',
            },
          ];
          var currency = document.getElementById('currency');

          for (var i = 0; i < currencies.length; i++) {
            var option = document.createElement('ion-select-option');
            option.value = currencies[i];
            option.innerHTML = `${currencies[i].symbol} (${currencies[i].code}) ${currencies[i].name}`;

            currency.appendChild(option);
          }
          currency.value = currencies[0];
          currency.selectedText = getCurrencySelectedText();
          setResults(currency);

          currency.addEventListener('ionChange', function (ev) {
            currency.selectedText = getCurrencySelectedText();
          });

          function getCurrencySelectedText() {
            return currency.value.symbol;
          }
        });
        function resetGender() {
          var gender = document.getElementById('gender');
          gender.value = null;
        }
      </script>
    </ion-app>
  </body>
</html>
